<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="form" class="demo-form-inline" style="padding-top: 20px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.realName" placeholder="真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="状态">
            <el-option label="冻结" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select" icon="el-icon-search">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <div style="font-size: 12px;line-height: 20px;">
            <div style="background-color: #d0ebe2" class="status_icon"></div>
            管理员<br>
            <div style="background-color: #e8abab" class="status_icon"></div>
            冻结<br>
            <div style="border: #b9b9b9 1px solid" class="status_icon"></div>
            正常
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
          :data="user"
          :fit="true"
          :lazy="false"
          :key="randomKey"
          :row-class-name="tableRowClassName"
          class="table"
          size="mini"
          style="width: 100%;text-align: center">
        <el-table-column
            fixed
            prop="username"
            label="用户名"
            sortable
            align="center"
            head-align="center"
            width="150">
          <template v-slot="scope">
            <el-input v-if="scope.row.editFlag" v-model="scope.row.username"></el-input>
            <span v-else>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="realName"
            label="真实姓名"
            sortable
            align="center"
            head-align="center"
            width="110">
          <template v-slot="scope">
            <el-input v-if="scope.row.editFlag" v-model="scope.row.realName"></el-input>
            <span v-else>{{ scope.row.realName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="联系方式"
            align="center"
            head-align="center"
            width="150">
          <template v-slot="scope">
            <el-input v-if="scope.row.editFlag" v-model="scope.row.phone"></el-input>
            <span v-else>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            align="center"
            sortable
            head-align="center"
            width="100">
          <template v-slot="scope">
            <el-select v-if="scope.row.editFlag" v-model="scope.row.sex">
              <el-option label="女" value="0"></el-option>
              <el-option label="男" value="1"></el-option>
              <el-option label="其他" value="2"></el-option>
            </el-select>
            <span v-else>{{ formatSex(scope.row.sex) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birthday"
            label="生日"
            align="center"
            head-align="center"
            sortable
            width="130">
          <template v-slot="scope">
            <el-date-picker
                v-if="scope.row.editFlag"
                v-model="scope.row.birthday"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <span v-else>{{ scope.row.birthday }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="email"
            align="center"
            head-align="center"
            label="邮箱"
            width="200">
          <template v-slot="scope">
            <el-input v-if="scope.row.editFlag" v-model="scope.row.email"></el-input>
            <span v-else>{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="注册时间"
            align="center"
            sortable
            head-align="center"
            width="200">
        </el-table-column>
        <el-table-column
            prop="status"
            align="center"
            head-align="center"
            sortable
            label="状态"
            width="150">
          <template v-slot="scope">
            <el-switch
                v-if="scope.row.editFlag"
                style="display: block"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="正常"
                inactive-text="冻结">
            </el-switch>
            <span v-else>{{ scope.row.status ? '正常' : '冻结' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="identity"
            label="身份"
            align="center"
            head-align="center"
            sortable
            width="180">
          <template v-slot="scope">
            <el-radio-group v-model="scope.row.identity" size="mini" v-if="scope.row.editFlag">
              <el-radio-button label="1">管理员</el-radio-button>
              <el-radio-button label="0">普通用户</el-radio-button>
            </el-radio-group>
            <span v-else>{{ scope.row.identity === 1 ? '管理员' : '普通用户' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="identity"
            label="头像"
            align="center"
            head-align="center"
            width="120">
          <template v-slot="scope">
            <el-avatar size="50" :src="scope.row.headImage" @error="errorHandler"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            align="center"
            head-align="center"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button @click="editRow(scope.$index, scope.row.editFlag)" :type="scope.row.editFlag ? 'primary' : '' "
                       size="small">{{
                scope.row.editFlag ? '完成' : '编辑'
              }}
            </el-button>
            <el-button @click="deleteRow(scope.row)" :type="scope.row.editFlag ? '' : 'danger' "
                       size="small">{{ scope.row.editFlag ? '取消' : '删除' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50, 100]"
          background
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "@/Axios/axios";

export default {
  data() {
    return {
      user: [],
      form: {},
      total: 0,
      page: 1,
      pageSize: 10,
      randomKey: Math.random(),
    }
  },
  mounted() {
    this.select()
  },
  methods: {
    select() {
      this.form.page = this.page;
      this.form.pageSize = this.pageSize;
      axios.post("/admin/userManage/list", this.form).then(res => {
        if (res.code === 200) {
          this.user = res.data.entityList;
          this.total = res.data.total;
          this.user.forEach(item => {
            item.editFlag = false;
            item.sex = item.sex + '';
          })
        }
      }).catch(() => {
      });
    },

    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.select();
    },

    pageChange(page) {
      this.page = page;
      this.select();
    },

    reset() {
      this.form = {};
      this.select();
    },

    errorHandler() {
      return true
    },

    editRow(index, flag) {
      this.user[index].editFlag = !this.user[index].editFlag;
      this.randomKey = Math.random();
      if (flag) {
        this.$confirm('是否确定修改用户' + this.user[index].username + '的信息?', '修改用户信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          axios.post("/admin/userManage/updateUser", this.user[index]).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.select();
            } else {
              this.$message({
                type: 'warning',
                message: res.msg
              });
            }
          }).catch(() => {
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改'
          });
        });
      }
    },

    deleteRow(row) {
      if (row.editFlag) {
        this.select();
        return;
      }
      if (row.identity === 1) {
        this.$message({
          type: 'warning',
          message: '不能删除管理员'
        });
        return;
      }
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("/admin/userManage/deleteUser/" + row.id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.select();
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            });
          }
        }).catch(() => {
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    tableRowClassName({row}) {
      let className = '';
      if (row.identity === 1) {
        className = 'manage-row';
      }
      if (!row.status) {
        className = 'error-row';
      }
      return className;
    },
    formatSex(value) {
      switch (value) {
        case '0':
          return '女';
        case '1':
          return '男';
        case '2':
          return '其他';
        default:
          return '未知';
      }
    }
  }

}
</script>

<style scoped>

.container {
  height: 100%;
  margin-bottom: 20px;
}

.header {
  height: 90px;
  margin: 0 20px;
}

.main {
  background-color: #fff;
  margin: 0 20px;
}

.el-pagination {
  float: right;
}

.table >>> th {
  background-color: #f5f7fa;
}

.table >>> .manage-row {
  background-color: #d0ebe2;
}

.table >>> .error-row {
  background-color: #e8abab;
}

.status_icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.el-pagination {
  margin: 5px 0 20px 0;
}
</style>